<template>
	<view class="lottery-button">
		<view v-if="showChoujiangButton" class="list" style="margin-bottom: 20px;margin-top: 20px;">
			<view class="item">
				<button @click="onPlay" style="width: 50%;">
					<text>立即抽奖</text>
				</button>
			</view>
		</view>
		<view class="list">
			<view class="item">
				<button @click="showDialog">
					<text>抽奖规则</text>
				</button>
			</view>
			<view v-if="isSj" class="item">
				<button @click="toHome">
					<text>返回首页</text>
				</button>
			</view>
			<view v-else-if="isDzp" class="item">
				<button @click="showWinerDialogAll">
					<text>中奖名单</text>
				</button>
			</view>
			<view v-else-if="isPm" class="item">
				<button @click="showWinerDialog">
					<text>中奖名单</text>
				</button>
			</view>
		</view>
		<view v-if="false" class="res">
			<text>您还有</text>
			<b>3次</b>
			<text>抽奖机会</text>
		</view>
		<lottery-dialog-winer :title="title" v-if="winerDialog.visible" :prizeList="prizeList"
			@callback="dialogWinerCallback">
		</lottery-dialog-winer>
		<lottery-dialog-winer title="上轮中奖名单" v-if="winerDialogAll.visible" :prizeList="prePrizeList"
			@callback="dialogWinerAllCallback">
		</lottery-dialog-winer>
		<lottery-dialog v-if="dialog.visible" :title="`抽奖规则`" :content="guize" @callback="dialogCallback">
		</lottery-dialog>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				winerDialog: {
					visible: false
				},
				winerDialogAll: {
					visible: false
				},
				dialog: {
					visible: false
				}
			}
		},
		props: {
			info: {
				type: Object,
				default () {
					return {
						guize: ''
					}
				}
			},
			showTips: {
				type: String,
				default: "",
			},
			showChoujiangButton: {
				type: Boolean,
				default: false,
			},
			lotteryType: {
				type: String,
				default: "dzp",
			},
			title: {
				type: String,
				default: "中奖名单"
			},
			prizeList: {
				type: Array,
				default () {
					return []
				}
			},
			prePrizeList: {
				type: Array,
				default () {
					return []
				}
			}
		},
		computed: {
			isSj() {
				return this.lotteryType == 'sj'
			},
			isDzp() {
				return this.lotteryType == 'dzp'
			},
			isPm() {
				return this.lotteryType == 'pm'
			},
			guize() {
				return this.info.guize + "\n" + this.showTips
			}
		},
		methods: {
			toHome() {
				this.$emit('toHome')
			},
			onPlay() {
				this.$emit('onPlay')
			},
			showWinerDialog() {
				this.winerDialog.visible = true
			},
			showWinerDialogAll() {
				this.winerDialogAll.visible = true
			},
			showDialog() {
				this.dialog.visible = true
			},
			dialogWinerCallback() {
				this.winerDialog.visible = false
			},
			dialogWinerAllCallback() {
				this.winerDialogAll.visible = false
			},
			dialogCallback() {
				this.dialog.visible = false
			}
		}
	}
</script>

<style lang="less" scoped>
	.lottery-button {
		padding: 0 10vw;

		.list {
			display: flex;
			padding-bottom: 10px;

			.item {
				flex: 1;
				margin: 0 5px;

				button {
					display: block;
					width: 100%;
					border: 0;
					background: url('https://wx.2024csnl.com/static/lottery/lottery-6.png') center center no-repeat;
					background-size: 100% 100%;
				}

				text {
					display: block;
					width: 100%;
					font-size: 15px;
					height: 40px;
					line-height: 40px;
					color: #ffffff;
				}
			}
		}

		.res {
			position: relative;
			text-align: center;
			line-height: 50px;
			color: #ffffff;
			font-size: 15px;

			b {
				font-weight: normal;
				color: #ffd56d;
			}
		}
	}
</style>